<template>
  <div class="cell_box" :style="calcBoxStyle">
    <div class="cell" :style="calcCellStyle">
      <template v-if="cell.CellType === 'Textbox'">
        <span class="cell-text">{{ cell.Text }}</span>
      </template>
      <template v-else-if="cell.CellType === 'CheckBox'">
        <SvgIcon v-if="cell.Text==='true'" name="CheckBoxChecked"></SvgIcon>
        <SvgIcon v-else name="CheckBox"></SvgIcon>
      </template>
      <template v-else>
        <img :src="imgUrl">
      </template>
    </div>
  </div>
</template>
<script>
import SvgIcon from '../SvgIcon/index.vue';
import { requestBlob } from '@/utils/request';
export default {
  components: { SvgIcon },
  inject: ['manager', 'gridView'],
  props: {
    cell: {
      type: Object,
      default: () => { },
    },
    tableIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      imgUrl: '',
    };
  },
  computed: {
    calcCellStyle() {
      const obj = {
        fontSize: this.cell.FontSize + 'px',
        fontName: this.cell.FontName,
      };
      if (this.cell.FontBold) {
        obj['font-weight'] = 'bolder';
      }
      if (this.cell.FontItalic) {
        obj['font-style'] = 'italic';
      }
      if (this.cell.FontStrikeout) {
        obj['text-decoration'] = 'line-through';
      }
      if (this.cell.FontUnderline) {
        obj['text-decoration'] = 'underline';
      }
      if (this.cell.VerticalAlign === 'Top') {
        obj['align-items'] = 'start';
      } else if (this.cell.VerticalAlign === 'Middle') {
        obj['align-items'] = 'center';
      } else if (this.cell.VerticalAlign === 'Bottom') {
        obj['align-items'] = 'end';
      }
      if (this.cell.CellType === 'Textbox') {
        if (this.cell.TextAlign === 'Left') {
          obj['justify-content'] = 'start';
        } else if (this.cell.TextAlign === 'Center') {
          obj['justify-content'] = 'center';
        } else if (this.cell.TextAlign === 'Right') {
          obj['justify-content'] = 'end';
        }
      }

      if (this.cell.WritingMode === 'Horizontal') {
        obj['writing-mode'] = 'lr-tb';
      } else if (this.cell.WritingMode === 'Vertical') {
        obj['writing-mode'] = 'tb-rl';
      }
      obj['font-family'] = this.cell.FontName;
      obj['font-size'] = this.cell.FontSize + 'px';
      obj['background-color'] = 'transparent';
      return obj;
    },
    calcBoxStyle() {
      const obj = {
        height: '0px',
        width: '0px',
        left: '0px',
        top: '0px',
        zIndex: this.gridView.ZIndex * 10,
      };
      let height = 0;
      for (let i = this.cell.RowIndex; i <= this.cell.MaxRowIndex; i++) {
        height += this.gridView.Rows[i].Height;
      }
      obj.height = height + 'px';
      let width = 0;
      for (let i = this.cell.ColumnIndex; i <= this.cell.MaxColumnIndex; i++) {
        width += this.gridView.Columns[i].Width;
      }
      obj.width = width + 'px';
      if (this.cell.MaxRowIndex !== this.cell.RowIndex || this.cell.MaxColumnIndex !== this.cell.ColumnIndex) {
        obj.zIndex++;
      }
      let top = 0;
      let left = 0;
      for (let i = 0; i < this.cell.RowIndex; i++) {
        top += this.gridView.Rows[i].Height;
      }
      obj.top = top + 'px';
      for (let i = 0; i < this.cell.ColumnIndex; i++) {
        left += this.gridView.Columns[i].Width;
      }
      obj.left = left + 'px';
      if (this.cell.BackColor) {
        obj['background-color'] = this.cell.BackColor;
      }
      if (this.cell.ForeColor) {
        obj.color = this.cell.ForeColor;
      }
      if (this.cell.BorderBottomLineStyle !== 'None') {
        obj['border-bottom'] = this.cell.BorderBottomWidth + 'px';
        obj['border-bottom-style'] = this.cell.BorderBottomLineStyle;
        obj['border-bottom-color'] = this.cell.BorderBottomColor;
      }
      if (this.cell.BorderLeftLineStyle !== 'None') {
        obj['border-left'] = this.cell.BorderLeftWidth + 'px';
        obj['border-left-style'] = this.cell.BorderLeftLineStyle;
        obj['border-left-color'] = this.cell.BorderLeftColor;
      }
      if (this.cell.BorderRightLineStyle !== 'None') {
        obj['border-right'] = this.cell.BorderRightWidth + 'px';
        obj['border-right-style'] = this.cell.BorderRightLineStyle;
        obj['border-right-color'] = this.cell.BorderRightColor;
      }
      if (this.cell.BorderTopLineStyle !== 'None') {
        obj['border-top'] = this.cell.BorderTopWidth + 'px';
        obj['border-top-style'] = this.cell.BorderTopLineStyle;
        obj['border-top-color'] = this.cell.BorderTopColor;
      }
      if (this.cell.CellType === 'TextBox') {
        obj['padding-left'] = this.cell.PaddingLeft + 'px';
        obj['padding-top'] = this.cell.PaddingTop + 'px';
        obj['padding-right'] = this.cell.PaddingRight + 'px';
        obj['padding-bottom'] = this.cell.PaddingBottom + 'px';
      }

      return obj;
    },
  },
  created() {
    if (this.cell.CellType === 'Image') {
      this.loadImg();
    }
  },
  methods: {
    async loadImg() {
      const url = '/api/Accessory/GetSignImage?recordId=' + this.cell.Text + '&cardName=' +
      (this.cell.CardNameOfImage || 'D_USER') + '&docName=' + this.cell.ImageName;
      const res = await requestBlob(url);
      this.imgUrl = URL.createObjectURL(res);
    },

  },
};
</script>
<style lang="scss">
.cell_box {
  border: 1px solid #cddaea;
  box-sizing: border-box;
  position: absolute;
  user-select: none;

  .cell {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    background: #fff;
    display: flex;
    overflow: hidden;

    .cell-text {
      overflow: hidden;
      // white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
    }

    &.active {
      border-color: red;
      border-style: dotted;
    }
  }
}
</style>
